<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


</head>
<body>
<div id="app">

        <el-form :disabled="true" ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-form-item label="标题">
                <el-input v-model="sizeForm.title"></el-input>
            </el-form-item>
            <el-form-item label="原因">
                <el-input type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入内容" v-model="sizeForm.reason"></el-input>
            </el-form-item>
            <el-form-item label="待办人">
                <el-select v-model="sizeForm.todoManId" placeholder="待办负责人">
                    <el-option label="人事1" value="人事1"></el-option>
                    <el-option label="人事2" value="人事2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.startTime" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.endTime" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

        </el-form>
        <el-divider></el-divider>
        <el-form  ref="form" :model="renshiForm" label-width="80px" size="mini">
            <el-form-item label="是否通过">
                <el-input v-model="renshiForm.isPass"></el-input>
            </el-form-item>
            <el-form-item label="审核意见">
                <el-input type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入内容" v-model="renshiForm.manageOpinion"></el-input>
            </el-form-item>
            <el-form-item label="待办人">
                <el-select v-model="renshiForm.todoManId" placeholder="待办负责人">
                    <el-option label="经理1" value="经理1"></el-option>
                    <el-option label="经理2" value="经理2"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        </el-form>

        <span slot="footer" class="dialog-footer" style="display: block;margin: 0 auto;text-align: center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    <!--</el-dialog>-->


    <!--    <h2 class="ui  header m-font-thin m-inline-block broadcast" th:text="${msg}">118</h2>-->
</div>
</body>

<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &lt;!&ndash;vue要放在element ui前面&ndash;&gt;-->
<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script language='javascript' th:inline="javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                taskId:[[${taskId}]],
                taskMainId:[[${id}]],
                name: "indexJK",
                dialogVisible: false, //弹出框
               submitTaskVisible: false,
                rowData:{},
                sizeForm: {
                    title: '',
                    reason: '',
                    startTime: '',
                    endTime: '',
                    taskId:''
                },
                renshiForm:{
                    manageOpinion:new Date()+'',
                    isPass:'同意',
                    todoManId:'经理1'
                },
            }
        },
        created() {
            // this.initMessage()
            this.init()
            // this.getTabData();
        },
        methods: {
            dialogVisibleMethod(index,row){
                this.dialogVisible = true
                this.sizeForm = row
            },
            submitTaskhandleClose(done,row) {
                if (this.submitTaskVisible==false){
                    this.rowData = {}
                    this.submitTaskVisible=true
                    this.rowData = row
                }else{
                    this.submitTaskVisible=false
                }
            },

            handleClose(){this.dialogVisible = false},
            test() {
                this.dialogVisible = true;
            },
            handleEdit(index, row) {
                // console.log(index, row);
            },
            handleDelete(index, row) {
                // console.log(index, row);
            },
            init() {
                _this = this
                axios({
                    url: "/taskMainById/"+_this.taskMainId,
                    data: '',
                    method: 'get',
                    params: {},
                }).then(res => {
                    _this.sizeForm = res.data.data.data
                    console.log(_this.sizeForm)
                    // this.formInline.message = res.data
                })
            },
            initMessage() {
                axios({
                    url: "/ele/getTask",
                    data: '',
                    method: 'get',
                    params: {},
                }).then(res => {
                    this.formInline.message = res.data
                })
            },
            onSubmit() {
                _this = this
                var submitData = this.renshiForm
                submitData.taskId = this.taskId
                submitData.instanceId = this.sizeForm.instanceId
                submitData.title = this.sizeForm.title
                submitData.reason = this.sizeForm.reason
                axios({
                    url: "/completetask",
                    // data: JSON.stringify(_this.sizeForm),
                    data: submitData,
                    method: 'post',
                    // params: {'message': this.formInline.message},
                }).then(res => {
                    _this.dialogVisible = false
                    _this.init()
                    /* var msg = res.data
                  *  this.$message({
                         showClose: true,
                         // message: [[${msg}]],
                         message: msg,
                         type: msg
                     });*/
                })
            },
            submitTask(){
                _this = this
                axios({
                    url: "/submitTask",
                    data: this.rowData,
                    method: 'post',
                }).then(res => {
                    console.log(res.data.message)
                    _this.submitTaskVisible = false
                    var msg = res.data.message
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: msg
                    });
                })
            }

        }
    })
</script>
<style>
    .is-selected {
        color: #1989FA;
    }
    .dialog-footer {
        position: sticky;
        bottom: 10px;
        text-align: center;
        background-color: #fff;
    }

</style>
</html>